<template>
  <div>
    <el-dialog title="渠道商品上架" width="60%" v-model="dialogTableVisible" top="5vh">
      <div>
        <el-row>
          <el-col :span="6">
            <el-form :inline="true" @submit.prevent>
              <el-form-item label="商品名称">
                <el-input
                  v-model="itemSaleQuery.itemSaleName"
                  placeholder="请输入商品名称回车查询"
                  @keyup.enter="currentChangeItemSale(1)"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form :inline="true" @submit.prevent>
              <el-form-item label="门店名称">
                <el-input
                  v-model="branchQuery.branchName"
                  placeholder="输入门店名称回车查询"
                  @keyup.enter="currentChangeBranch(1)"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form :inline="true" @submit.prevent>
              
              <el-form-item>
                <el-button type="success" icon="Check" @click="submitForm"
                  >上架
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-col>
            <el-form>
              <el-form-item label="销售渠道">
                <el-checkbox-group v-model="form.checkedChannels">
                  <el-checkbox
                    v-for="saleChannel in saleChannels"
                    :key="saleChannel.id"
                    :label="saleChannel.label"
                    :value="saleChannel.id"
                  >
                    {{ saleChannel.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form class="el-form--label-top">
              <el-form-item label="商品列表">
                <el-table
                  ref="itemSaleTable"
                  :data="itemSaleTableData"
                  row-key="itemSaleId"
                  border
                  default-expand-all
                  stripe
                  @select-all="handleAllSelectionItemSale"
                  @select="handleSelectionItemSale"
                >
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column type="index" label="序号" width="60">
                  </el-table-column>
                  <el-table-column prop="itemSaleCode" label="销售商品编码" width="200">
                  </el-table-column>
                  <el-table-column prop="itemSaleName" label="销售商品名称">
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form class="el-form--label-top">
              <el-form-item label="门店列表">
                <el-table
                  ref="branchTable"
                  :data="branchTableData"
                  row-key="sysBranchId"
                  border
                  default-expand-all
                  stripe
                  @select="handleSelectionBranch"
                >
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column type="index" label="序号" width="60">
                  </el-table-column>
                  <el-table-column
                    prop="branchCode"
                    label="门店编码"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column prop="branchName" label="门店名称">
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :current-page="itemSaleQuery.current"
              :page-size="itemSaleQuery.size"
              :total="itemSaleQuery.total"
              @current-change="currentChangeItemSale"
            >
            </el-pagination>
          </el-col>
          <el-col :span="12">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :current-page="branchQuery.current"
              :page-size="branchQuery.size"
              :total="branchQuery.total"
              @current-change="currentChangeBranch"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="ItemSaleChannelTable">
import { pageItemSale } from "../../api/itemSale";
import { pageSysBranch } from "../../api/branch";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";

let emit = defineEmits(["onClick"]);
let dialogTableVisible = ref(false);
let itemSaleTable = ref();
let branchTable = ref();
let itemSaleTableData = ref([]);
let branchTableData = ref([]);
let itemSaleQuery = ref({ size: 10, current: 0, total: 1 });
let branchQuery = ref({ size: 10, current: 0, total: 1 });
let form = ref({
  selectionItemSales: [],
  selectionBranches: [],
  checkedChannels: [],
});
const saleChannels = [
  { id: 1, label: "小程序" },
  { id: 2, label: "美团" },
  { id: 3, label: "饿了么" },
];

function loadData() {
  pageItemSale(itemSaleQuery.value)
    .then((res) => {
      itemSaleQuery.value.size = res.data.size;
      itemSaleQuery.value.current = res.data.current;
      itemSaleQuery.value.total = res.data.total;
      itemSaleTableData.value = res.data.records;
    })
    .catch((err) => {
      console.log(err);
    });
  pageSysBranch(branchQuery.value)
    .then((res) => {
      branchQuery.value.size = res.data.size;
      branchQuery.value.current = res.data.current;
      branchQuery.value.total = res.data.total;
      branchTableData.value = res.data.records;
    })
    .catch((err) => {
      console.log(err);
    });
}
function currentChangeItemSale(current) {
  itemSaleQuery.value.current = current;
  loadData();
}
function currentChangeBranch(current) {
  branchQuery.value.current = current;
  loadData();
}
function handleAllSelectionItemSale(selection) {
  form.value.selectionItemSales = selection;
}
function handleSelectionItemSale(selection, row) {
  form.value.selectionItemSales = selection;
}
function handleSelectionBranch(selection, row) {
  form.value.selectionBranches = selection;
}
function submitForm() {
  console.log(form.value);
  if (form.value.checkedChannels.length == 0) {
    ElMessage.warning("至少选择一个销售渠道");
    return;
  }
  if (form.value.selectionItemSales.length == 0) {
    ElMessage.warning("至少选择一件商品");
    return;
  }
  if (form.value.selectionBranches.length == 0) {
    ElMessage.warning("至少选择一个门店");
    return;
  }
  itemSaleTable.value.clearSelection();
  branchTable.value.clearSelection();
  emit("onClick", form.value);
}

defineExpose({ dialogTableVisible });
onMounted(() => {
  loadData();
});
</script>

<style scoped></style>
